Telegram Group & Telegram Channel
🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки

Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.

Вот что появилось:

Текстовые тени
Добавили text-shadow с 5 размерами (2xslg).
Поддерживаются цветные тени, например:
text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.

🎭 CSS-маски
Новые утилиты mask-* для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50% — плавное затемнение сверху.
Можно комбинировать несколько масок.

🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere

Особенно полезно в flex и grid, где раньше длинные строки могли ломать вёрстку.

🌈 Цветной drop-shadow
Теперь drop-shadow можно раскрашивать:
drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.

📱 Указатели: coarse / fine
Появились префиксы pointer-coarse, pointer-fine и any-pointer-*.
Полезно для адаптации интерфейса под тач или мышку:
<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>


🧮 Выравнивание по последней строке
items-baseline-last и self-baseline-last — выравнивают по последней строке текста.
Актуально для карточек, чатов и типографики.

🛟 Безопасное центрирование
justify-center-safe, items-center-safe — если контент не влезает, он смещается влево, а не обрезается.

💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение @property, если не поддерживается
- корректная деградация теней и градиентов

🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");


🔄 Другие полезности
- noscript: — для стилей без JS
- user-valid: и user-invalid: — UX-дружественная валидация
- details-content: — для <details>
- inverted-colors: — для системной инверсии

🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо

CutCode
🔥113



tg-me.com/laravel_cutcode/722
Create:
Last Update:

🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки

Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.

Вот что появилось:

Текстовые тени
Добавили text-shadow с 5 размерами (2xslg).
Поддерживаются цветные тени, например:
text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.

🎭 CSS-маски
Новые утилиты mask-* для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50% — плавное затемнение сверху.
Можно комбинировать несколько масок.

🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere

Особенно полезно в flex и grid, где раньше длинные строки могли ломать вёрстку.

🌈 Цветной drop-shadow
Теперь drop-shadow можно раскрашивать:
drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.

📱 Указатели: coarse / fine
Появились префиксы pointer-coarse, pointer-fine и any-pointer-*.
Полезно для адаптации интерфейса под тач или мышку:

<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>


🧮 Выравнивание по последней строке
items-baseline-last и self-baseline-last — выравнивают по последней строке текста.
Актуально для карточек, чатов и типографики.

🛟 Безопасное центрирование
justify-center-safe, items-center-safe — если контент не влезает, он смещается влево, а не обрезается.

💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение @property, если не поддерживается
- корректная деградация теней и градиентов

🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");


🔄 Другие полезности
- noscript: — для стилей без JS
- user-valid: и user-invalid: — UX-дружественная валидация
- details-content: — для <details>
- inverted-colors: — для системной инверсии

🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо

CutCode

BY Новости от CutCode




Share with your friend now:
tg-me.com/laravel_cutcode/722

View MORE
Open in Telegram


Новости от CutCode Telegram | DID YOU KNOW?

Date: |

Telegram has exploded as a hub for cybercriminals looking to buy, sell and share stolen data and hacking tools, new research shows, as the messaging app emerges as an alternative to the dark web.An investigation by cyber intelligence group Cyberint, together with the Financial Times, found a ballooning network of hackers sharing data leaks on the popular messaging platform, sometimes in channels with tens of thousands of subscribers, lured by its ease of use and light-touch moderation.

In many cases, the content resembled that of the marketplaces found on the dark web, a group of hidden websites that are popular among hackers and accessed using specific anonymising software.“We have recently been witnessing a 100 per cent-plus rise in Telegram usage by cybercriminals,” said Tal Samra, cyber threat analyst at Cyberint.The rise in nefarious activity comes as users flocked to the encrypted chat app earlier this year after changes to the privacy policy of Facebook-owned rival WhatsApp prompted many to seek out alternatives.Новости от CutCode from hk


Telegram Новости от CutCode
FROM USA